// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box > ul > li");
        this.span = this.tag.querySelectorAll(".dot_box> span")
        // 获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        // 触发绑定事件
        this.eventFn();
        // 初始化变量
        this.index = 0;
        // 获取上一个初始化变量值
        this.lastIndex = 0;
        this.leftFn();
        this.dotsFn();
        this.dotsColorFn();
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });
    };

    // 点击右按钮
    eventFn() {

        this.lBtn.addEventListener("click", () => {
            // 操作数组
            // 添加数组第一个值到最后
            this.listClassName.push(this.listClassName[0]);
            // 删除数字的第一个值
            this.listClassName.shift();
            // li全部重新设置类名
            this.restListFn();
            // this.inde++;
            // // index操作完成之后重新赋值
            this.lastIndex = this.index;
            this.index--;
            // this.index++;
            // // index最大值
            // if (this.index == this.listClassName.length) {
            //     this.index = 0;
            // };

            // // 去除当前li类名
            // this.list[this.lastIndex].classList.remove(this.listClassName[this.lastIndex]);
            // // 添加新类名
            // this.list[this.index].classList.add(this.listClassName[this.index]);
            if (this.lastIndex == 0) {
                this.index = 3
            }
            // console.log(this.lastIndex, this.index);
            this.dotsColorFn();
        });

    }

    leftFn() {
        this.rBtn.addEventListener("click", () => {
            this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
            // 删除数字的第一个值
            this.listClassName.pop();
            // li全部重新设置类名
            this.restListFn();
            this.lastIndex = this.index;
            ++this.index;
            console.log(this.lastIndex, this.index);
            if (this.index == this.listClassName.length) {
                this.index = 0
            }
            if (this.index <= this.listClassName.length) {
                this.dotsColorFn();
            }
            // console.log(this.list);
        });
    }
    //小圆点颜色
  

   
    dotsColorFn() {
        this.span[this.lastIndex].classList.remove("dot_active");
        this.span[this.index].classList.add("dot_active");
    }


    dotsFn() {
        this.span.forEach(item => {
            item.addEventListener("click", () => {
                // 获取自定义属性data-index
                // let getIndex = item.getAttribute("data-index");
                // 重新赋值index
                // this.index = getIndex;
                // this.list.forEach((item, idx) => {
                //     item.className = this.listClassName[getIndex];
                // });
                
                // 小圆点颜色
                this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                // 删除数字的第一个值
                this.listClassName.pop();
                // li全部重新设置类名
                this.restListFn();

                // 保留上一个操作值
                this.lastIndex = this.index;
                // this.dotsColorFn()
                
            });
        });
    }


}